<template>
	<div class="usdt-address-add px-[35px] pb-[136px]">
		<bank-header
			:type="WalletType.bank.id"
			:title="title"
			:is-link="!realName"
			@click="handleRealName" />
		<div class="usdt-address-add__content">
			<wallet-select-bank
				:placeholder="$t('wallet.bankCardSelect')"
				class="!h-[60px] mb-5 border-b-[2px] border-bg-3"
				:options="bankList"
				:ableDeleted="false"
				modifyClass="!pr-0 !border-t-0  !border-l-0  !border-r-0 rounded-none !border-b-[2px]"
				v-model:modelValue="bankValue" />
			<base-input
				v-model="cardNumber"
				:placeholder="$t('validate.cardNumber')"
				clearable
				inputmode="numeric"
				type="code">
				<template #suffix v-if="!cardNumber">
					<base-paste @paste="onPaste" />
				</template>
			</base-input>
			<base-button
				type="primary"
				block
				round
				:disabled="submitDisabled"
				:loading="loading"
				@click="onSubmit"
				style="margin-top: 27px">
				{{ $t('action.add') }}
			</base-button>
		</div>
		<p v-if="!String($attrs.bankCards).length" class="desc">
			<span>{{ $t('validate.descBank') }}</span>
			<span class="link cursor-pointer" @click="changeType">
				{{ $t('validate.phoneAndEmail') }}
			</span>
		</p>

		<bank-real-name v-model="showRealName" />
	</div>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref, watch } from 'vue'
import { addCard } from '@/api/wallet'
import { t } from '@/utils'
import { WalletType } from '@/enums'
import { useProfileStore, useWalletStore } from '@/store'
import BankRealName from './bank-real-name.vue'
import { BANK_USDT_MAX_LIMIT } from '@/constants'
import BankHeader from './bank-header.vue'
import { useMessage } from '@/hooks'
import { BaseButton, BaseInput, BasePaste } from '@/components/base'
import WalletSelectBank from '@/views/wallet/components/wallet-select-bank.vue'

const emit = defineEmits(['select'])
const changeType = () => {
	emit('select', 'mobile')
}
const profileStore = useProfileStore()
const walletStore = useWalletStore()
const message = useMessage()

const title = computed(() => profileStore.userInfo?.realName || t('validate.realName'))
const realName = computed(() => profileStore.userInfo?.realName)

const bankValue: any = ref('')
const bankList: any = computed({
	get: () => {
		return walletStore.bankList.map((item: any) => ({
			id: item.id,
			text: item.name,
			img: item.icon,
			type: 'server'
		}))
	},
	set: (newValue) => (bankList.value = newValue)
})

const cardNumber = ref('')
watch(cardNumber, (nv) => {
	if (nv.length > BANK_USDT_MAX_LIMIT) {
		cardNumber.value = nv.slice(0, BANK_USDT_MAX_LIMIT)
	}
})
const onPaste = (text: string) => (cardNumber.value = text.replace(/\D/g, ''))
const submitDisabled = computed(
	() => !bankValue.value || !cardNumber.value
	// () => !realName.value || !cardBank.value || !cardNumber.value || !!cardNumberError.value
)

const loading = ref(false)
const showRealName = ref(false)

const handleRealName = () => {
	if (!realName.value) {
		showRealName.value = true
	}
}

const onSubmit = async () => {
	try {
		loading.value = true
		const params = {
			cardHolder: realName.value,
			cardNumber: cardNumber.value,
			bankId: bankValue.value,
			userId: profileStore.userInfo?.userId
		}
		await addCard(params)
		await walletStore.getAllCards()
		loading.value = false
		message.success(t('message.saveSuccess'))
		await profileStore.getUserInfo()
		walletStore.setValidateShow(false)
		showRealName.value = false
		walletStore.setWalletDepositShow(true)
	} catch (error) {
		loading.value = false
		message.error(error)
	}
}

onMounted(async () => {
	if (!walletStore.bankList.length) {
		await walletStore.getBanks()
	}
})
</script>
<style scoped lang="scss">
.field-label {
	font-size: 14px;

	margin-right: 50px;
	color: var(--color-text-1);
	line-height: 20px;
}

.desc {
	margin-top: 20px;
	text-align: center;
	font-size: 12px;

	color: var(--color-text-1);
	line-height: 18px;

	.link {
		margin-left: 4px;
		color: var(--color-primary);
	}
}
</style>
